<ion-header>
</ion-header>
<ion-content id="games">
    <ion-slides pager class="slides">
        <ion-slide *ngFor="let item of creatives" (click)="pushSlide(item)">
            <img [src]="item.image" class="slide-image" />
            <!-- <h3 class="slide-title" [innerHTML]="slide.title"></h3> -->
        </ion-slide>
    </ion-slides>
    <div padding>
        <ion-segment [(ngModel)]="category_id" color="dark" (ionChange)="categoryChanged($event)">
            <ion-segment-button value="1">
                SLG
            </ion-segment-button>
            <ion-segment-button value="2">
                RPG
            </ion-segment-button>
        </ion-segment>
    </div>

    <ion-list inset class="game_list">
        <ion-item *ngFor="let game of games" (click)="pushGameInfo(game)">
            <ion-thumbnail item-start>
                <img [src]="game.icon">
            </ion-thumbnail>
            <h2>{{game.name}}</h2>
            <p class="sub_title">
                <ion-icon style="margin-right: 4px" *ngFor="let i of [1,2,3,4,5]" [name]="i <= game.star ? 'ios-star' : 'ios-star-outline'"> </ion-icon>
            </p>
            <p class="sub_title">
                <ion-badge style="margin-right: 4px" *ngFor="let tag of game.tags.split(',')">{{tag}}</ion-badge>
            </p>
            <button ion-button item-end outline icon-end (click)="pushGameRuntime(game)">打开</button>
        </ion-item>
    </ion-list>

    <!--下滑的时候，加载数据-->
    <ion-infinite-scroll #infiniteScroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

</ion-content>